{% extends "./inc/base.html" %}
{% block style%}
<link rel="stylesheet" href="/static/admin/js/datepicker/bootstrap-datetimepicker.min.css" type="text/css">
{% endblock %}
{% block content %}
    <section class="hbox stretch">
    <section class="vbox">
        <header class="header bg-light dk">
            <p>跑得快统计</p>
        </header>
        <section class="scrollable wrapper">

            <section class="panel panel-default">
                <div class="row wrapper">  
                <div class="col-sm-5 m-b-xs">
                     <div class="btn-group">
                    </div>   
                </div>
                <div class="col-sm-7">
                    <div class="input-group pull-right search-form">
                        <table class="table m-b-n-sm ">
                            <tbody>
                              <tr>
                                 <td  style="border-top: 0px; padding-left: 0; padding-top: 0" >
                                    <div class="btn-group">
                                        <a class="btn btn-sm btn-info {%if period == 1 %}active{%endif%}"  href="/admin/statistics/friendpaodekuai/?period=1">近一月</a>
                                    </div>
                                    <div class="btn-group">
                                        <a class="btn btn-sm btn-info {%if period == 2 %}active{%endif%}"  href="/admin/statistics/friendpaodekuai/?period=2">近三月</a>
                                    </div>
                                    <div class="btn-group">
                                        <a class="btn btn-sm btn-info {%if period == 3 %}active{%endif%}"  href="/admin/statistics/friendpaodekuai/?period=3">近一年</a>
                                    </div>
                                 </td>
                                 <td  style="border-top: 0px; padding-left: 0; padding-top: 0" >
                                    <div class=" input-group ">
                                       <input class="input-sm input-s time form-control" size="16" type="text" value="{{startdate}}" data-date-format="dd-mm-yyyy" name="startdate" placeholder="开始时间">               
                                     </div>
                                 </td>
                                 <td style="border-top: 0px; padding-left: 0; padding-top: 0" >
                                    <div class=" input-group ">
                                        <input class="input-sm input-s time form-control" size="16" type="text" value="{{enddate}}" data-date-format="dd-mm-yyyy" name="enddate" placeholder="结束时间">
                                    </div>
                                </td>
                               </tr>
                             </tbody>
                            </table>
                            
                            <span class="input-group-btn">
                        <button class="btn btn-sm btn-default" type="button" id="search" url="/admin/statistics/friendpaodekuai">搜索</button>
                         </span>
                    </div>
                </div>
                     
                </div>
                <div class="table-responsive">
                    <table class="table table-striped b-t b-light">
                        <tbody>
                        <div id="main" style="width: 1200px;height:500px;"></div>
                        </tbody>
                    </table>
                </div>
            </section>
        </section>
    </section>
    </section>
{% endblock%}

{% block script%}
<script src="/static/admin/js/parsley/parsley.min.js"></script>
<script src="/static/admin/js/parsley/parsley.extend.js"></script>
<script src="/static/admin/js/datepicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="/static/admin/js/datepicker/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
<script src="/static/admin/js/echarts.js" type="text/javascript"></script>
<script>
$(function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
        var serLineItem = function () {
         return {
           name: '',
           type: 'line',
           smooth:true,
           data: []
       }
     }

    var seriesData = [];
    {% for item in seriesList %}
       var lineItem = new serLineItem();
        lineItem.name = '{{item.name}}';
        lineItem.data = '{{item.data}}'.split(',');
        seriesData.push(lineItem);
    {% endfor %}


    // 指定图表的配置项和数据
    option = {
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:'{{legendList}}'.split(',')
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data:'{{xAxisdataList}}'.split(',')
    },
    yAxis: {
        type: 'value'
    },
    series:seriesData
};
    
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        
    $('.time').datetimepicker({
            format: 'yyyy-mm-dd',
            language:"zh-CN",
            minView:2,
            autoclose:true
    });

    function isPriceNumber(_keyword){
        if(_keyword == "0" || _keyword == "0." || _keyword == "0.0" || _keyword == "0.00"){
            _keyword = "0"; return true;
        }else{
            var index = _keyword.indexOf("0");
            var length = _keyword.length;
            if(index == 0 && length>1){/*0开头的数字串*/
                var reg = /^[0]{1}[.]{1}[0-9]{1,2}$/;
                if(!reg.test(_keyword)){
                    return false;
                }else{
                    return true;
                }
            }else{/*非0开头的数字*/
                var reg = /^[1-9]{1}[0-9]{0,10}[.]{0,1}[0-9]{0,2}$/;
                if(!reg.test(_keyword)){
                    return false;
                }else{
                    return true;
                }
            }
            return false;
        }
    }
    $(document).on('click', ".recharge", function (e) {
        var balance = $("input[name='balance']").val();
        var name = $("input[name = 'name']").val();
        var id = $("input[name = 'id']").val();
        if(!isPriceNumber(balance)){
            swal( "请填写正确的价格.");
            return false;
        }
        swal({
            title: "确认您的操作！",
            text: "您将给 "+name+" 充值 "+balance+" 元！",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "确定充值!",
            cancelButtonText: "关闭!",
            closeOnConfirm: false
        }, function () {
            $.ajax({
                url:"/admin/user/recharge",
                data:{balance:balance,id:id},
                type:"POST",
                success:function (res) {
                    if(res.errno == 0){
                        swal(res.data.name, "", "success");
                        $('#ajaxModal').modal('hide');
                        location.reload();
                    }

                }
            })

        });
    })
    
    $(document).on('click', ".rechargecard", function (e) {
        var balance = $("input[name='balance']").val();
        var name = $("input[name = 'name']").val();
        var id = $("input[name = 'id']").val();
        if(!isPriceNumber(balance)){
            swal( "请填写正确的数量.");
            return false;
        }
        swal({
            title: "确认您的操作！",
            text: "您将给 "+name+" 充卡 "+balance+" 张！",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "确定充卡!",
            cancelButtonText: "关闭!",
            closeOnConfirm: false
        }, function () {
            $.ajax({
                url:"/admin/user/rechargecard",
                data:{balance:balance,id:id},
                type:"POST",
                success:function (res) {
                    if(res.errno == 0){
                        swal(res.data.name, "", "success");
                        $('#ajaxModal').modal('hide');
                        location.reload();
                    }

                }
            })

        });
    })
    
    $(document).on('click', ".rechargecoin", function (e) {
        var balance = $("input[name='balance']").val();
        var name = $("input[name = 'name']").val();
        var id = $("input[name = 'id']").val();
        if(!isPriceNumber(balance)){
            swal( "请填写正确的数量.");
            return false;
        }
        swal({
            title: "确认您的操作！",
            text: "您将给 "+name+" 充币 "+balance+" 枚！",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "确定充币!",
            cancelButtonText: "关闭!",
            closeOnConfirm: false
        }, function () {
            $.ajax({
                url:"/admin/user/rechargecoin",
                data:{balance:balance,id:id},
                type:"POST",
                success:function (res) {
                    if(res.errno == 0){
                        swal(res.data.name, "", "success");
                        $('#ajaxModal').modal('hide');
                        location.reload();
                    }

                }
            })

        });
    })
    //搜索功能
    $("#search").click(function(){
        var url = $(this).attr('url');
        var query  = $('.search-form').find('input').serialize();
        query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g,'');
        query = query.replace(/^&/g,'');
        if( url.indexOf('?')>0 ){
            url += '&' + query;
        }else{
            url += '?' + query;
        }
        window.location.href = url;
    });

    //回车自动提交
    $('.search-form').find('input').keyup(function(event){
        if(event.keyCode===13){
            $("#search").click();
        }
    });
})
</script>
{% endblock %}